<template>
  <container-item-wrapper :widget="widget"
    :style="{ 'height': !!widget.options.cellHeight ? widget.options.cellHeight : '100%' }" ref="draBox">
    <el-row :key="widget.id" :gutter="widget.options.gutter" class="grid-container" :class="['left-right', customClass]"
      :ref="widget.id" v-show="!widget.options.hidden"
      :style="{ 'height': !!widget.options.cellHeight ? widget.options.cellHeight : '100%' }">
      <template v-for="(colWidget, colIdx) in widget.cols" :key="colIdx">
        <grid-col-item :widget="colWidget" :parent-list="widget.cols" :index-of-parent-list="colIdx"
          :parent-widget="widget" :col-height="widget.options.colHeight" :sub-form-row-id="subFormRowId"
          :sub-form-row-index="subFormRowIndex" class="leftright-col" :sub-form-col-index="subFormColIndex"
          :style="{ 'height': !!widget.options.cellHeight ? widget.options.cellHeight : '100%' ,'padding': '0 5px !important'}"
          :ref="'grid_col' + colIdx" @mouseenter="mouseEnterHandle(colIdx)">
          <!-- 递归传递插槽！！！ -->
          <template v-for="slot in Object.keys($slots)" v-slot:[slot]="scope">
            <slot :name="slot" v-bind="scope" />
          </template>
        </grid-col-item>

        <div v-if="colIdx === 0" ref="dragAroundResize"
          :class="[!!widget.options.dragAround ? 'drag-around-resize open' : 'drag-around-resize noResize']">
          <div ref="drag-around-resize-left" v-if="currentIndex === 0"
            :class="[!!widget.options.dragAround ? 'drag-around-resize-left open' : 'drag-ud-resize drag-around-no-open']"
            @click="fullScreen(widget, 'left')">
          </div>
          <div ref="drag-around-resize-right" v-if="currentIndex === 1"
            :class="[!!widget.options.dragAround ? 'drag-around-resize-right open' : 'drag-ud-resize drag-around-no-open']"
            @click="fullScreen(widget, 'right')">
          </div>
        </div>
      </template>
    </el-row>
  </container-item-wrapper>
</template>

<script>
import emitter from '@/utils/emitter'
import i18n from "../../../utils/i18n"
import refMixin from "../../../components/form-render/refMixin"
import ContainerItemWrapper from './container-item-wrapper'
import GridColItem from './grid-col-item'
import containerItemMixin from "./containerItemMixin"
import { dragAroundColDiv, dragUdColDiv } from "@/utils/dragColDiv";
export default {
  name: "left-right-item",  //grid-item跟VueGridLayout全局注册组件重名，故特殊处理！！
  componentName: 'ContainerItem',
  mixins: [emitter, i18n, refMixin, containerItemMixin],
  data() {
    return {
      currentDar: 'center',
      currentIndex: null
    }
  },
  components: {
    ContainerItemWrapper,
    GridColItem,
  },
  props: {
    widget: Object,

    subFormRowIndex: { /* 子表单组件行索引，从0开始计数 */
      type: Number,
      default: -1
    },
    subFormColIndex: { /* 子表单组件列索引，从0开始计数 */
      type: Number,
      default: -1
    },
    subFormRowId: { /* 子表单组件行Id，唯一id且不可变 */
      type: String,
      default: ''
    },
  },
  inject: ['refList', 'sfRefList', 'globalModel'],
  created() {
    this.initRefList()
  },
  mounted() {
    // this.$nextTick(() => {
    //     if (this.widget.options.dragAround) {
    //         dragAroundColDiv.call(this, this.$refs.draBox.$el, this.$refs.grid_col0[0].$el, this.$refs.dragAroundResize[0], this.$refs.grid_col1[0].$el)
    //     }
    // })
  },
  beforeUnmount() {
    this.unregisterFromRefList()
  },
  methods: {
    mouseEnterHandle(colIdx) {
      this.currentIndex = colIdx
    },
    fullScreen(activeData, direction) {
      this.$refs.grid_col0[0].$el.style = 'height:' + this.widget.options.cellHeight + 'px'
      const leftHandle = () => {
        this.$refs.grid_col0[0].setFullScreen('right')
        this.$refs.grid_col1[0].setFullScreen('left')

        document.querySelector('.drag-around-resize').style.left = '0'
      }
      const rightHandle = () => {
        this.$refs.grid_col0[0].setFullScreen('left')
        this.$refs.grid_col1[0].setFullScreen('right')
        document.querySelector('.drag-around-resize').style.left = '100%'
      }
      const centerHandle = () => {
        this.currentDar = 'center'
        this.$refs.grid_col0[0].setFullScreen('center')
        this.$refs.grid_col1[0].setFullScreen('center')
        document.querySelector('.drag-around-resize').style.left = '49.5%'
      }
      if (this.currentDar === 'center') {
        this.currentDar = direction
        if (direction === 'left') {
          leftHandle()
        } else {
          rightHandle()
        }
      }
      if (this.currentDar === 'left' && direction === 'right') {
        centerHandle()
      } else if (this.currentDar === 'right' && direction === 'left') {
        centerHandle()
      }
    }
  },
}
</script>

<style lang="scss" scoped>
.noResize {
  cursor: auto !important;

  &:hover,
  &:focus,
  &:active {
    background: transparent;

    &::before {
      background-color: #979797;
    }
  }
}

.drag-around-resize {
  width: 4px;
  // cursor: ew-resize;
  // width: 22px;
  // cursor: pointer;
  text-align: center;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: transparent;
  position: absolute;
  left: 49.5%;
  height: 100%;
  .drag-around-resize-left {
    position: absolute;
    top: 43%;
    height: 48px;
    width: 12px;
    margin-bottom: 10px;
    z-index: 99;
    cursor: pointer !important;
    left: -10px;
    background-image: url('../../../assets/ft-images/resize-left-blue.svg');
    background-size: 100% auto;

  }

  .drag-around-resize-right {
    position: absolute;
    top: 43%;
    height: 48px;
    width: 12px;
    z-index: 99;
    right: -10px;
    background-image: url('../../../assets/ft-images/resize-right-blue.svg');
    cursor: pointer !important;
    background-size: 100% auto;

  }

  // &:hover,
  // &:focus,
  // &:active {
  //     background: #D8D8D8;

  //     &::before {
  //         background-color: #979797;
  //     }
  // }

  &::before {
    display: inline-block;
    content: "";
    clear: both;
    width: 1px;
    height: 100%;
    background-color: #6ca4df;
  }
}

.drag-around-no-open {
  display: none;
}



.drag-around-no-resize {
  cursor: move;

  &:hover,
  &:focus,
  &:active {
    background: transparent;

    &::before {
      background-color: transparent;
    }
  }

  &::before {
    display: inline-block;
    content: "";
    clear: both;
    width: 1px;
    height: 100%;
    background-color: transparent;
  }
}

.drag-around-right {
  height: 100%;
  position: relative;
}

.left-right {
  >.el-col-12 {
    flex: 1;
  }
}


::v-deep .el-col-24 {
  max-width: calc(100% - 10px) !important
}

::v-deep .el-row {
  padding: 0 !important
}
</style>